import React from "react";
import {connect} from "react-redux";
import './index.scss';
import { Button, Divider, Row, Col,} from 'antd';
import emitter from '../../event';
import classnames from 'classnames'


const mapStateToProps = (state) => {
    return {
        state,
    };
}

class MusicHistoryList extends React.Component{
    constructor(props) {
        super(props);
        this.state = {};
    }


    fitterTime = (value) => {
        var theTime = parseInt(value/1000);// 秒
        var middle= 0;// 分
        var hour= 0;// 小时

        if(theTime > 60) {
            middle= parseInt(theTime/60);
            theTime = parseInt(theTime%60);
            if(middle> 60) {
                hour= parseInt(middle/60);
                middle= parseInt(middle%60);
            }
        }
        let Time = parseInt(theTime).toString().padStart(2, '0')
        let Middle = parseInt(middle).toString().padStart(2, '0')
        let Hour = parseInt(theTime).toString().padStart(2, '0')
        var result = "00:"+Time;
        if(middle > 0) {
            result = Middle+":"+Time;
        }
        if(hour> 0) {
            result = Hour + ":" + Middle+":"+Time;
        }
        return result;
    }

    PlayThisSongs(item){
        emitter.emit('PlayAudio',item.id,item.MusicInfo);
    }

    render() {
        const { historyList, historyListActive } = this.props.state;

        let list = []

        historyList.map((r,index) => {
            let artistslist = [];
            r.MusicInfo.ar.map((item,key) => {
                artistslist.push(
                    <span key={key} artistid={item.id} className="Artists-Name">{item.name}</span>
                )
            })
            list.push(
                <Row onDoubleClick={() => this.PlayThisSongs(r)} className={classnames('MusicItem',{"active": historyListActive === r.id})} gutter={16}>
                    <Col className="history_col activeItem" span={11}>{r.MusicInfo.name}</Col>
                    <Col className="history_col activeItem" span={9}>{artistslist}</Col>
                    <Col className="history_col" span={4}>{this.fitterTime(r.allTime)}</Col>
                </Row>
            )
        })


        return (
            <div className="MusicHistroyPage">
                <div className="title">当前播放</div>
                <div className="total_box">
                    <span className="length">
                        共{historyList.length}首
                    </span>
                    <Button type={"link"}>清空列表</Button>
                </div>
                <Divider />
                <div className="HistoryList">
                    {list}
                </div>
            </div>
        )
    }
}


export default connect(mapStateToProps)(MusicHistoryList);